<template>
    <!-- 产品库存窗口 -->
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view
                    class="return"
                    @click="stock_index--"
                    v-show="stock_index != 1"
                >
                    <i class="el-icon-arrow-left"></i>
                </view>
                <view class="title">{{
                    stock_index == 1
                        ? title
                        : stock_index == 2
                        ? "产品库存流水"
                        : "流水详情"
                }}</view>
                <view class="close" @click="close" v-show="stock_index == 1">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <view class="gd-info-tit">
                <view class="img-desc-box">
                    <image
                        class="img"
                        :src="goodsImg"
                        mode="aspectFill"
                    ></image>
                    <view class="desc-box">
                        <view class="txt name">{{ goodsName }}</view>
                        <view class="txt desc">{{
                            stock_index == 1 ? gdDesc : store_log_info.spec_name
                        }}</view>
                    </view>
                </view>
            </view>
            <div class="stock-list" v-show="stock_index == 1">
                <view class="s-n-box">
                    <view>全部仓库</view>
                    <view>总库存:{{ totalTxt }}</view>
                </view>
                <view class="cate-list comm-list">
                    <view
                        class="store-box"
                        v-for="(item, index) in list"
                        :key="index"
                    >
                        <view class="s-b">
                            <view class="store-tit">{{ item.store_name }}</view>
                            <view class="store-tit">{{
                                item.qty_min_str
                            }}</view>
                        </view>
                        <view
                            class="sepc-no"
                            v-if="item.store_list && item.store_list.no_spec"
                        >
                            <view class="s-tit-box">
                                <view class="s-p-1">
                                    <view>无规格</view>
                                    <view class="n-act">
                                        <view class="tit">{{
                                            item.store_list.no_spec.qty_min_str
                                        }}</view>
                                        <view
                                            class="tit edit-txt"
                                            @click="
                                                eidit(
                                                    item.storeid,
                                                    item.store_list.no_spec
                                                )
                                            "
                                            >修改</view
                                        >
                                        <view
                                            class="tit edit-txt"
                                            @click="
                                                getstoreLogFun(
                                                    item.store_list.no_spec
                                                )
                                            "
                                            >查看流水</view
                                        >
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view
                            class="spec-box"
                            v-if="item.store_list && item.store_list.spec"
                        >
                            <view
                                class="s-tit-box"
                                v-for="(item1, index1) in item.store_list.spec"
                                :key="index1"
                            >
                                <view class="s-p-1">
                                    <view>{{ item1.title }}</view>
                                    <view class="n-act">
                                        <view class="tit">{{
                                            item1.qty_min_str
                                        }}</view>
                                        <view
                                            class="tit edit-txt"
                                            v-if="item1.qty_min_1_flag == 1"
                                            @click="dismantle(item1)"
                                            >拆</view
                                        >
                                        <view
                                            v-if="
                                                item1.qty_min_1_flag == 0 &&
                                                !item1.sub
                                            "
                                            class="tit edit-txt"
                                            @click="eidit(item.storeid, item1)"
                                            >修改</view
                                        >
                                        <view
                                            v-if="
                                                item1.qty_min_1_flag == 0 &&
                                                !item1.sub
                                            "
                                            class="tit edit-txt"
                                            @click="getstoreLogFun(item1)"
                                            >查看流水</view
                                        >
                                    </view>
                                </view>
                                <view class="spec-p1-1" v-if="item1.sub">
                                    <view
                                        class="spec-1-box"
                                        v-for="(item2, index2) in item1.sub"
                                        :key="index2"
                                    >
                                        <view class="s-p">
                                            <view>{{ item2.title }}</view>
                                            <view class="n-act">
                                                <view class="tit">{{
                                                    item2.qty_min_str
                                                }}</view>
                                                <view
                                                    v-if="
                                                        item2.qty_min_1_flag ==
                                                        1
                                                    "
                                                    class="tit edit-txt"
                                                    @click="dismantle(item2)"
                                                    >拆</view
                                                >
                                                <view
                                                    v-if="
                                                        item2.qty_min_1_flag ==
                                                            0 && !item2.sub
                                                    "
                                                    class="tit edit-txt"
                                                    @click="
                                                        eidit(
                                                            item.storeid,
                                                            item2
                                                        )
                                                    "
                                                    >修改</view
                                                >
                                                <view
                                                    v-if="
                                                        item2.qty_min_1_flag ==
                                                            0 && !item2.sub
                                                    "
                                                    class="tit edit-txt"
                                                    @click="
                                                        getstoreLogFun(item2)
                                                    "
                                                    >查看流水</view
                                                >
                                            </view>
                                        </view>
                                        <view class="s-p2-sub" v-if="item2.sub">
                                            <view
                                                class="spec-2-box"
                                                v-for="(
                                                    item3, index3
                                                ) in item2.sub"
                                                :key="index3"
                                            >
                                                <view>{{ item3.title }}</view>
                                                <view class="n-act">
                                                    <view class="tit">{{
                                                        item3.qty_min_str
                                                    }}</view>
                                                    <view
                                                        class="tit edit-txt"
                                                        @click="
                                                            eidit(
                                                                item.storeid,
                                                                item3
                                                            )
                                                        "
                                                        >修改</view
                                                    >
                                                    <view
                                                        class="tit edit-txt"
                                                        @click="
                                                            getstoreLogFun(
                                                                item3
                                                            )
                                                        "
                                                        >查看流水</view
                                                    >
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </div>

            <div
                class="stock-water-list comm-list"
                v-infinite-scroll="loadFun"
                v-show="stock_index == 2"
            >
                <div
                    class="stock-water-row"
                    v-for="(item, index) in store_log_list"
                    :key="index"
                >
                    <div class="tiem-box">
                        <span>{{ item.day }}</span>
                    </div>
                    <div
                        class="water-info-row"
                        v-for="(item2, index2) in item.list"
                        :key="index2"
                        @click="getlogDetail(item2)"
                    >
                        <div class="left">
                            <div class="title" v-if="item2.odno">
                                <span>{{ item2.odno }}</span>
                            </div>
                            <div class="title">
                                <span>{{ item2.act_txt }}</span>
                            </div>
                            <div class="txt" v-if="item2.txt">
                                <span>{{ item2.txt }}</span>
                            </div>
                        </div>
                        <div
                            class="right"
                            :class="getMinus(item2.qty_min) ? 'minus' : ''"
                        >
                            <span>{{ item2.qty_min }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="stock-water-info" v-show="stock_index == 3">
                <div class="info-box">
                    <div class="title"><span>流水类型</span></div>
                    <div class="info">
                        <span>{{ store_log_detail.act_txt }}</span>
                    </div>
                </div>
                <div class="info-box">
                    <div class="title"><span>供应商</span></div>
                    <div class="info">
                        <span>{{ store_log_detail.supp_name }}</span>
                    </div>
                </div>
                <div class="info-box" v-if="store_log_detail.price_name">
                    <div class="title">
                        <span>{{ store_log_detail.price_name }}</span>
                    </div>
                    <div class="info">
                        <span>{{ store_log_detail.price }}</span>
                    </div>
                </div>
                <div class="info-box">
                    <div class="title"><span>发生数量</span></div>
                    <div class="info">
                        <span
                            :class="
                                Number(store_log_detail.qty_min) >= 0
                                    ? 'info-g'
                                    : 'info-r'
                            "
                            >{{ store_log_detail.qty_min }}</span
                        >
                    </div>
                </div>
                <div class="info-box">
                    <div class="title"><span>发生金额</span></div>
                    <div class="info">
                        <span>{{ store_log_detail.amount }}</span>
                    </div>
                </div>
                <div class="info-box">
                    <div class="title"><span>发生时间</span></div>
                    <div class="info">
                        <span>{{ store_log_detail.atime_txt }}</span>
                    </div>
                </div>
                <div class="info-box">
                    <div class="title"><span>经手人</span></div>
                    <div class="info">
                        <span>{{ store_log_detail.uid_cp_name }}</span>
                    </div>
                </div>
                <div class="info-box">
                    <div class="title"><span>相关单号</span></div>
                    <div class="info">
                        <span>{{ store_log_detail.odno || "暂无单号" }}</span>
                    </div>
                </div>
                <div class="info-box">
                    <div class="title"><span>备注说明</span></div>
                    <div class="info">
                        <span>{{ store_log_detail.txt }}</span>
                    </div>
                </div>
            </div>
        </view>

        <popEditStoreNumWin
            ref="popEditStoreNumWin"
            @refrush="refrush"
        ></popEditStoreNumWin>
    </view>
</template>

<script>
import popEditStoreNumWin from "./PopEditStoreNumWin.vue";
import staticConst from "../../js/const/StaticConst.js";
import util from "../../js/util/Util.js";
import config from "../../js/conf/Config.js";

import lang from "../../js/conf/Lang.js";
import https from "../../js/https/Https.js";

export default {
    components: { popEditStoreNumWin },
    data() {
        return {
            stock_index: 1,
            title: lang.gdStoreTitTxt,
            goodsImg: staticConst.GOOD_IMG,
            goodsName: "",
            gdDesc: "",
            totalTxt: "",
            openShow: 0,
            list: [],
            store_log_list: [],
            store_log_info: {},
            store_log_detail: {},
            gdId: "",
            updata: {},
            pfrom: 0,
            storeData: {},
            is_load: true,
        };
    },
    methods: {
        show(type, data) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) return;
            this.gdId = data.id;
            this.ch = data.ch;
            this.getStoreList();
        },
        getMinus(item) {
            return item.indexOf("-") > -1;
        },
        close() {
            this.show();
        },

        refrush(data) {
            this.updata = data;
            this.getStoreList(true);
        },
        // 滚动加载
        loadFun() {
            if (this.is_load) return;
            this.pfrom += 20;
            this.getstoreLog();
        },
        async getlogDetail(item) {
            let url = config.GOODS_STORE_LOG_DETAIL;
            let param = {
                log_id: item.log_id,
                ch: "goods",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.stock_index = 3;
                this.store_log_detail = res.data;
            }
        },
        //获取库存流水列表
        getstoreLogFun(item) {
            this.storeData = item;
            this.store_log_list = [];
            this.pfrom = 0;
            this.is_load = false;
            this.getstoreLog();
        },
        async getstoreLog() {
            let url = config.GOODS_STORE_LOG;
            let param = {
                id: this.storeData.id,
                ch: "goods",
                pfrom: this.pfrom,
                pnum: 20,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.info) {
                this.stock_index = 2;
                this.store_log_info = res.data.info || {};
            }
            if (res.status == 1 && res.data.list) {
                this.store_log_list = this.store_log_list.concat(res.data.list);
            } else {
                this.is_load = true;
            }
        },
        /***获取库存*****/
        getStoreList(isChange = false) {
            let that = this;
            let data = {};
            data.gdid = this.gdId;
            https.getGoodsStore(data, back);
            function back(data) {
                if (!data) return;
                if (data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    console.log(data, "kuc");
                    that.goodsName = data.info.goods_name;

                    that.goodsImg = staticConst.GOOD_IMG;
                    if (data.info.goods_img_small)
                        that.goodsImg = data.info.goods_img_small;

                    that.gdDesc = "";
                    if (data.info.category_name) {
                        that.gdDesc = data.info.category_name;
                    }

                    if (data.info.item_no) {
                        if (that.gdDesc == "") {
                            that.gdDesc = data.info.item_no;
                        } else {
                            that.gdDesc = that.gdDesc + "|" + data.info.item_no;
                        }
                    }
                    if (data.info.brands_name) {
                        that.gdDesc = data.info.brands_name + "|" + that.gdDesc;
                    }
                    that.totalTxt = "";
                    if (data.info.qty_min_total_str)
                        that.totalTxt = data.info.qty_min_total_str;
                    that.list = [];
                    if (data.list) that.list = data.list;

                    if (isChange) {
                        data.list.map((v) => {
                            if (v.storeid == that.updata.storeid) {
                                that.updata.qty_min = v.qty_min;
                            }
                        });
                        that.$emit(
                            "editQtyNumUpdate",
                            data.info.qty_min_total,
                            that.updata
                        );
                    }
                }
            }
        },

        /*****编辑*******/
        eidit(storeid, item) {
            let data = {};
            data.act = 1; //编辑
            data.item = item;
            data.ch = this.ch;
            data.storeid = storeid;
            this.$refs.popEditStoreNumWin.show("show", data);
        },

        /*****拆分****/
        dismantle(item) {
            let data = {};
            data.act = 2; //拆分库存
            data.item = item;
            data.ch = this.ch;
            this.$refs.popEditStoreNumWin.show("show", data);
        },
    },
};
</script>


<style lang="scss" scoped>
.stock-water-info {
    .info-box {
        display: flex;
        padding: 10px 10px;
        font-size: 14px;
        border-bottom: 1px #ededed solid;
        .title {
            width: 90px;
        }
        .info {
            color: #676767;
        }
        .info-g {
            color: #23c064;
        }
        .info-r {
            color: #f44848;
        }
    }
}
.stock-water-list {
    height: 490px;
    margin-top: 5px;
    overflow: auto;
    .stock-water-row {
        cursor: pointer;
        .tiem-box {
            padding: 5px 10px;
            background: #ededed;
        }
        .water-info-row {
            padding: 5px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px #ededed solid;

            &:hover {
                background: #ededed;
            }
            .left {
                .title {
                    font-weight: bold;
                    font-size: 14px;
                }
                .txt {
                    font-size: 12px;
                }
            }
            .right {
                color: #23c064;
                font-weight: bold;
                &.minus {
                    color: #ff0e00;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.mask {
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    transition: 0.3s;
    .mask-content {
        width: 100%;
        max-height: 250px;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: 0.3s;
        .item {
            border-bottom: 1px solid #ececec;
            padding: 10px 20px;
        }
        .active {
            color: #3388ff;
        }
    }
    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.4);
        .mask-content {
            transform: translateY(0);
        }
    }
}
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 550px;
        height: 650px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 18px;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
            .return {
                position: absolute;
                left: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                i {
                    font-size: 22px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }

    .gd-info-tit {
        padding: 10px;
        background-color: #ededed;
        .img-desc-box {
            display: flex;
            align-items: center;

            image {
                width: 80px;
                height: 80px;
                border-radius: 6px;
                overflow: hidden;
            }
            .desc-box {
                padding-left: 10px;
                .txt {
                    max-width: 388px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: -moz-box;
                    -moz-line-clamp: 2;
                    -moz-box-orient: vertical;
                    word-wrap: break-word;
                    word-break: break-all;
                    white-space: normal;
                }
                .name {
                    font-size: 16px;
                }
                .desc {
                    color: #999;
                }
            }
        }
    }
    .s-n-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        color: #333;
        background-color: #fff;
    }
}
.bg-color {
    background: #e6e6e6;
    padding: 10px;
}
.cate-list {
    height: 458px;
    .store-box {
        .s-b {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 10px;
            background-color: #ededed;
        }
        .sepc-no,
        .spec-box {
            padding: 5px 10px;
            background-color: #fff;
            color: #333;
            border-bottom: 1px solid #ededed;
            .s-tit-box {
                .s-p-1 {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .n-act {
                        display: flex;

                        .tit {
                            padding-left: 10px;
                        }
                        .edit-txt {
                            color: #3388ff;
                            cursor: pointer;
                        }
                        .edit-txt:hover {
                            color: #2a71d4;
                        }
                    }
                }
                .spec-p1-1 {
                    padding-left: 20px;
                    .spec-1-box {
                        padding: 5px 0;
                        .s-p {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .n-act {
                                display: flex;
                                .tit {
                                    padding-left: 10px;
                                }
                                .edit-txt {
                                    color: #3388ff;
                                    cursor: pointer;
                                }
                                .edit-txt:hover {
                                    color: #2a71d4;
                                }
                            }
                        }
                        .s-p2-sub {
                            padding-left: 20px;
                            .spec-2-box {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                padding: 5px 0;
                                .n-act {
                                    display: flex;
                                    .tit {
                                        padding-left: 10px;
                                    }
                                    .edit-txt {
                                        color: #3388ff;
                                        cursor: pointer;
                                    }
                                    .edit-txt:hover {
                                        color: #2a71d4;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>